<template>
  <div class="app-container">
    <!-- <div class="button-area">
      <el-button type="primary" @click="dialogFormVisible = true"
        >验收入库</el-button
      >
    </div> -->
    <el-table :data="tableData" style="width: 100%">
      <!-- <el-table-column prop="review" label="状态">
        <template slot-scope="scope">
          <span>{{ scope.row.review ? scope.row.review === 1 ? '拒绝' : '通过' : '正在审核'}}</span>
        </template>
      </el-table-column> -->
      <el-table-column prop="buyName" label="采购人"> </el-table-column>
      <el-table-column prop="buyTime" label="采购日期"> </el-table-column>
      <el-table-column prop="name" label="采购单商品">
        <template slot-scope="scope">
          <span>{{ getProducts(scope.row.products) }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="action" label="操作">
        <template slot-scope="scope">
          <el-button
            @click="handleClick(scope.row)"
            type="text"
            size="small"
            >验收入库</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        :page-size="pagesize"
        :current-page="page"
      >
      </el-pagination>
    </div>
    <el-dialog title="验收入库" :visible.sync="dialogFormVisible" width="80%">
      <el-table :data="selectProductData" style="width: 100%">
        <el-table-column prop="name" label="采购单商品"></el-table-column>
        <el-table-column prop="num" label="采购单数量"></el-table-column>
        <el-table-column prop="inboundNum" label="本次入库数量">
          <template slot-scope="scope">
            <div class="input-box" v-if="scope.row.seen">
              <el-input
                size="small"
                @blur="loseFcous(scope.$index, scope.row)"
                v-model="scope.row.inboundNum"
              ></el-input>
            </div>
            <div v-else @click="getFcous(scope.$index, scope.row)" style="height: 44px">{{ scope.row.inboundNum }}</div>
          </template>
        </el-table-column>
        <!-- <el-table-column prop="action" label="操作">
          <template slot-scope="scope">
          <el-button
            @click="editNum(scope.row)"
            type="text"
            size="small"
            >编辑</el-button
          >
        </template>
        </el-table-column> -->
      </el-table>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="inbound"
          >入 库</el-button
        >
      </div>
    </el-dialog>
    <el-dialog
        width="30%"
        title="修改入库数量"
        :visible.sync="dialogAddInboundNumFormVisible"
        append-to-body
      >
        <el-form
          :model="inboundForm"
          :rules="inboundRules"
          ref="inboundForm"
          :inline="true"
        >
          <el-row>
            <el-col :span="24">
              <el-form-item label="数量" prop="num" required>
                <el-input
                  v-model="inboundForm.num"
                  autocomplete="off"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddInboundNumFormVisible = false"
            >取 消</el-button
          >
          <el-button type="primary" @click="submitInboundForm('inboundForm')"
            >确 定</el-button
          >
        </div>
      </el-dialog>
  </div>
</template>

<script>
import { listReagentBuy } from '@/api/reagent/buy'
import { newReagentStock } from '@/api/reagent/stock'

export default {
  name: 'Inbound',
  data() {
    return {
      tableData: [],
      selectProductData: [],
      dialogFormVisible: false,
      dialogAddInboundNumFormVisible: false,
      inboundForm: {
        num: '',
      },
      inboundRules: {
        num: [
          { required: true, message: '请输入本次入库数量', trigger: 'blur' },
        ],
      },
      total: 0,
      page: 1,
      pagesize: 10,
      products: [],
      editIndex: '',
      id: '',
    }
  },
  created() {
    this.getReagentBuy()
  },
  methods: {
    loseFcous(index, row) {
      row.seen = false
    },
    getFcous(index, row) {
      row.seen = true
    },
    getReagentBuy() {
      const self = this
      listReagentBuy({ pageNum: self.page, pageSize: self.pagesize, review: 2, status: 1 }).then(
        (response) => {
          if (response && response.rows) {
            self.tableData = response.rows
          }
        },
      )
    },
    inbound() {
      const self = this;
      if (self.selectProductData.length > 0) {
        let flag = true;
        for (let item of self.selectProductData) {
          if (!item.inboundNum) {
            flag = false;
            self.$message.error('请输入本次入库数量');
            break;
          }
        }
        if (flag) {
          const inboundValue = {
            id: self.id,
            products: self.selectProductData.map((item) => {
              return {
                productId: item.productId,
                num: item.inboundNum,
              }
            })
          }
          newReagentStock(inboundValue).then(
            (response) => {
              if (response && response.code === 200) {
                self.$message({
                  message: '入库成功',
                  type: 'success',
                })
                self.getReagentBuy()
                self.dialogFormVisible = false
              }
            }
          )
        }
      }
    },
    submitInboundForm(formName) {
      const self = this
      self.$refs[formName].validate((valid) => {
        if (valid) {
          if (self.selectProductData.length > 0) {
            if (self.editIndex || self.editIndex === 0) {
              self.selectProductData = self.selectProductData.map((item, index) => {
                if (index === self.editIndex) {
                  item = {
                    ...item,
                    inboundNum: self.inboundForm.num,
                  }
                }
                return item;
              })
              self.dialogAddInboundNumFormVisible = false;
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleClick(row) {
      const self = this;
      self.dialogFormVisible = true;
      self.id = row.id;
      self.selectProductData = row.products.map((item) => {
        return {
          ...item,
          seen: false,
        }
      });
    },
    getProducts(products) {
      let result = [];
      if (products) {
        result = products.map((item) => {
          return item.name;
        })
      }
      return result.toString();
    },
    editNum(row) {
      const self = this;
      if (self.selectProductData.length > 0) {
        self.dialogAddInboundNumFormVisible = true;
        self.selectProductData.map((item, index) => {
          if (item.id === row.id) {
            self.editIndex = index;
          }
        })
      }
    },
  },
}
</script>

<style></style>
